<template>
	<div class="list">
		<u-navbar :title="title" :autoBack="true" border></u-navbar>
		<u-list class="list">
			<u-list-item v-for="(item, index) in lists" :key="index">
				<div class="js-item" @click="$u.route(`/pages/music/index?id=${item.id}`)">
					<div class="num">{{ index + 1 }}</div>
					<div class="intro">
						<div class="name u-line-1">{{ item.name }}</div>
						<div class="singer u-line-1">{{ item.ar[0].name }}</div>
					</div>
				</div>
				<u-line></u-line>
			</u-list-item>
		</u-list>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			title: '',
			lists: []
		};
	},
	async onLoad(options) {
		this.title = options.title;
		if (this.newRanking.tracks == undefined && this.title == '新歌榜') {
			await this.$store.dispatch('home/fetchNewRanking', 0);
		} else if (this.originRanking.tracks == undefined && this.title == '原创榜') {
			await this.$store.dispatch('home/fetchOriginRanking', 0);
		} else if (this.upRanking.tracks == undefined && this.title == '飙升榜') {
			await this.$store.dispatch('home/fetchUpRanking', 0);
		}
		if (this.title === '新歌榜') {
			this.lists = this.newRanking.tracks;
		} else if (this.title === '原创榜') {
			this.lists = this.originRanking.tracks;
		} else if (this.title === '飙升榜') {
			this.lists = this.upRanking.tracks;
		}
	},
	computed: {
		...mapGetters(['newRanking', 'originRanking', 'upRanking'])
	},
	// 下拉事件
	onPullDownRefresh() {
		this.$store.dispatch('home/fetchRecommendSongData');
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.list {
	margin-top: 88rpx;
}
/* #ifdef H5 */
.list {
	margin-top: 48rpx;
}
/* #endif */
.js-item {
	display: flex;
	padding: 20rpx 30rpx;
	align-items: center;
	.num {
		font-size: 32rpx;
	}
	.intro {
		padding-left: 20rpx;
		.singer {
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>
